<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue.js 源代码学习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../libs/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="../../libs/vue/2.5.13/vue.min.js"></script>
    <script src="../../libs/vue-router/3.0.1/vue-router.js"></script>
    <script src="../../libs/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="../../libs/propper.js/1.13.0/umd/popper.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello App!</h1>
        <div class="list-group">
            <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
            <a class="list-group-item" v-link="{ path: '/about'}">About</a>
        </div>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <script>
        var Home = Vue.extend({
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function () {
                return {
                    msg: 'Hello, vue router!'
                }
            }
        })

        var About = Vue.extend({
            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
        })

        var router = new VueRouter();

        router.map({
            '/home': { component: Home },
            '/about': { component: About }
        })

        var App = Vue.extend({});
        router.start(App, '#app');
    </script>
</body>
<script src="../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>
</html>